<script setup>

</script>

<template>
  <aside class="sidebar">
    <h3>用户中心</h3>
    <div class="circle-image-container">
      <img src="@/assets/OurService1.jpg" alt="用户头像" class="circle-image" />
    </div>
    <p>欢迎您，用户123a</p>
    <ul>
      <li><router-link to="/order">订单管理</router-link></li>
      <li><router-link to="/address">地址管理</router-link></li>
      <li><router-link to="/faq">常见问题</router-link></li>
    </ul>
  </aside>
</template>

<style scoped>
.actions {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
}


/* 其他已有样式保持不变 */
.order-page {
  display: flex;
}

.sidebar {
  width: 200px;
  background-color: #f4f4f4;
  padding: 20px;
  height: 100vh;
}

.sidebar h3 {
  margin-bottom: 20px;
}

.sidebar ul {
  list-style: none;
  padding: 0;
}

.sidebar li {
  margin: 15px 0;
}

.sidebar a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

.sidebar a.router-link-exact-active {
  color: #1abc9c;
}

.content {
  flex: 1;
  padding: 20px;
}
.circle-image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
}

.circle-image {
  width: 120px; /* 设置图片宽度 */
  height: 120px; /* 高度与宽度一致形成圆形 */
  object-fit: cover; /* 图片自适应容器，裁剪多余部分 */
  border-radius: 50%; /* 关键属性：设置为圆形 */
  border: 3px solid #1abc9c; /* 可选边框 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
}
</style>